<template>
	<view class="app-container page-bg">
		<view class="flex">
			<view class="flex1">
				<image v-if="order.company === 2" src="/static/image/logo_tzl.png" mode="heightFix" class="logo"></image>
				<image v-if="order.company === 1" src="/static/image/logo_hmt.png" mode="heightFix" class="logo"></image>
			</view>
			<!-- <view class="flex flex-center back" @click="back">
				<text>返回荣数积分平台</text>
				<image src="/static/icon/arrow-white.png" mode="widthFix" class="icon"></image>
			</view> -->
		</view>
		
		<goods-desc :desc.sync="goodsinfo.desc" :img.sync="goodsinfo.detail_img" :name="goodsinfo.name"></goods-desc>
		
		<!-- 日历栏目 -->
		<view class="radius-24 white-bg mg-top-30 pd-26 date-container">
			<view class="flex flex-center pd-top-20 pd-bottom-25 date_title">
				<view class="my-h2 flex1">选择拍摄日期</view>
				<!-- <text class="color-light-gray bold">{{dates[0].date.substr(0, 7)}}</text> -->
				<text class="color-light-gray bold" @click="openCalendar">{{dates[0].date}}</text>
				<image class="more-date" src="@/static/icon/right.png" mode="widthFix" @click="openCalendar"></image>
			</view>
			<view class="flex mg-top-10">
				<view v-for="(date, index) of dates" :key="index" class="flex1 date_list">
					<text class="date-week">周{{date.week}}</text>
					<view class="date-num" @click="changeDate(date)">
						<text class="date-num-text" :class="{'date-num-text_check': date.date == orderDate, 'date-num-text_invalid': !date.valid}">{{date.day}}</text>
					</view>
				</view>
				<!-- 日历选择按钮 -->
				<!-- <view class="date_list date_btn" @click="openCalendar">
					<view class="date-week">
						<image src="/static/icon/calendar.png" mode="widthFix" class="calendar_icon"></image>
					</view>
					<view class="date-num">
						<text class="date-num-text color-white" style="font-size: 26rpx;">日历</text>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 日历弹窗 -->
		<calendar ref="calendar" v-show="calendarShowStatus" @change="changeDate" @close="calendarShowStatus = false"></calendar>
		
		<view class="radius-24 pd-30 white-bg mg-top-30">
			<view class="flex flex-center">
				<image class="width-26" src="/static/icon/icon-location.png" mode="widthFix"></image>
				<text class="mg-left-20">{{order.cityinfo.city_name}}</text>
				<image class="width-4 mg-left-20" src="/static/icon/line.png" mode="widthFix"></image>
				<text class="mg-left-20" @click="setRegion">{{currentRegion}}</text>
				<image class="mg-left-20 width-20" src="/static/icon/arrow-down.png" mode="widthFix" @click="setRegion"></image>
				<view class="flex1"></view>
			</view>
			<!-- <view class="shop-search mg-top-40 mg-bottom-20 flex flex-center">
				<input class="search-input flex1" v-model="searchShopName" placeholder="搜索门店" @confirm="uni.hideKeyboard()">
				<image class="width-28" src="/static/icon/search.png" mode="widthFix"></image>
			</view> -->
		</view>
		
		<!-- 门店列表 -->
		<view v-for="(shop, index) of showedShops" :key="'shop' + index"  class="radius-24  pd-26 mg-top-30 white-bg shop-container">
			<view>
				<!-- <uni-title :title="shop.name" type="h3" class="mg-top-10"></uni-title> -->
				<view class="flex flex-center mg-top-20">
					<image class="width-38" src="@/static/icon/shop.png" mode="widthFix"></image>
					<text class="mg-left-12 font-36 bold">{{shop.name}}</text>
				</view>
				<view class="flex flex-bottom mg-top-30">
					<view class="flex1 color-gray font-mediam">{{shop.region_name}}{{shop.address}}</view>
					<!-- <view class="font-small color-gray mg-left-20"><text>距此1.2KM</text></view> -->
				</view>
				<view class="line mg-top-40"></view>
			</view>
			<!-- 可选时间 -->
			<time-list :times="shop.times" @select="toSubmitPage" :shop="shop.id" class="mg-top-40 mg-bottom-40"></time-list>
		</view>
	</view>
</template>

<script>
	import calendar from './components/calendar.vue'
	import goodsDesc from './components/goods-desc.vue'
	import timeList from './components/time-list.vue'
	
	import moment from 'moment'
	import OrderApi from '@/api/order.js'
	
	export default {
		components: { calendar, goodsDesc, timeList },
		data() {
			return {
				calendarShowStatus: false,
				orderDate: '',
				order: {
					company: 0,
					sn: '',
					cityinfo: {
						type: '',
						city_name: '',
						city_id: 0,
					},
					cardinfo: {
						pass_inner: '',
						code_inner: ''
					},
					goodsinfo: {
						name: '',
						detail_img: ''
					}
				},
				dates: [], // {week: '', date: '', day: '', valid: 0}
				minDate: '',
				maxDate: '',
				shops: [],
				currentRegion: '全市',
				searchShopName: '',
				regions: []
			};
		},
		created() {
			this.order.sn = this.$route.query.sn;
			this.init()
			uni.$on('setCity', this.setCity)
		},
		show() {
			console.log(uni.getStorageSync('city'));
		},
		computed:{
			cardinfo() { return this.order.cardinfo;},
			goodsinfo() { return this.order.goodsinfo;},
			showedShops() {
				const shops = []
				const search = this.searchShopName;
				for (const shop of this.shops) {
					if (
					(this.currentRegion == '全市' || this.currentRegion === shop.region_name) 
					&& 
					(
						search == '全市'
						|| shop.name.indexOf(search) > -1 
						|| shop.region_name.indexOf(search) > -1
					)) {
						shops.push(shop)
					}
				}
				return shops;
			}
		},
		destroyed() {
			console.log('销毁');
			uni.$off('setCity');
		},
		methods:{
			init() {
				this.getOrder()
				this.initDate()
			},
			setCity(city) {
				console.log(city.city_name);
				this.order.cityinfo = city;
				setTimeout(() => {
					this.getShops()
				}, 1000)
			},
			setRegion() {
				console.log(this.regions);
				uni.showActionSheet({
					itemList: this.regions,
					success: (res) => {
						console.log(res);
						let index = res.tapIndex
						this.currentRegion = this.regions[index]
					}
				})
			},
			initDate() {
				let today = moment().add(3, 'days').format("YYYY-MM-DD")
				this.orderDate = today
				this.minDate = today
				this.maxDate = moment().add(30, 'days').format("YYYY-MM-DD")
				this.freshDate()
			},
			getOrder() {
				OrderApi.detail(this.order.sn).then(res => {
					this.order = res.data
					// this.order.goodsinfo.desc = '提供1寸冲印照8张或两寸4张；\n包含精修数码底片一张，不提供未修原图。'
					this.getShops()
				})
			},
			getShops() {
				uni.showLoading({
					title:'请求中'
				})
				const company = this.order.company
				// const company = 1
				OrderApi.shops(company, this.order.cityinfo.city_id, this.orderDate, this.order.goods).then(res => {
					uni.hideLoading()
					const shops = res.data
					let regions = ['全市']
					shops.forEach(shop => {
						console.log(shop.region_name);
						regions.push(shop.region_name)
					})

					this.shops = shops;
					this.regions = Array.from(new Set(regions))
					// console.log(JSON.stringify(regions));
				}).catch(res => {
					console.log('获取城市错误');
					console.log(res);
					uni.showToast({
						title: '城市请求出错',
						icon: 'none'
					})
				})
			},
			changeDate(date) {
				console.log(date);
				if (this.orderDate == date.fulldate) {
					this.calendarShowStatus = false
					return;
				}
				// 来自于页面日期
				if (typeof date.fulldate == 'undefined') {
					if (date.valid) {
						this.orderDate = date.date
						this.$refs.calendar.setDate(date.date)
					}
				} else {
					// 来自于日历的选择
					this.orderDate = date.fulldate
					this.calendarShowStatus = false
					this.freshDate()
				}
				this.getShops()
			},
			openCalendar() {
				this.calendarShowStatus = true
			},
			setCalendar() {
				this.$refs.calendar.setDate(this.orderDate)
			},
			freshDate() {
				let dates = []
				let mom = moment(this.orderDate).add(-1, 'days')
				let weeks = ['日', '一', '二', '三', '四', '五', '六']
				for(let i=0; i< 7; i++) {
					let date = mom.add(1, 'days').format('YYYY-MM-DD')
					let week = mom.day()
					let day	 = mom.format("DD")
					let valid = this.validTime(date)
					// console.log({week: weeks[week], date: date, day: day, valid: valid});
					dates.push({week: weeks[week], date: date, day: day, valid: valid})
				}
				this.dates = dates
			},
			// 验证日期的有效性
			validTime(date) {
					date = moment(date).valueOf()
				let min = moment(this.minDate).valueOf()
				let max = moment(this.maxDate).valueOf()
				console.log(date, min, max);
				return (date >= min) && (date <= max)
			},
			toSubmitPage(info) {
				console.log(info.shop);
				console.log(info.time);
				
				// 缓存相应信息

				// 跳转到详情页面
				uni.navigateTo({
					url: `./order-submit?sn=${this.order.sn}&shop=${info.shop}&date=${this.orderDate}&time=${info.time}`
				})
			},
			back() {
				window.location.back()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.logo{
		height: 60rpx;
	}
	
	.back{
		color: #fff;
		font-size: 24rpx;
		line-height: 48rpx;
		padding: 0rpx 20rpx;
		border-radius: 14rpx;
		background-color: #FF7A20;
		.icon{
			width: 14rpx;
			margin-left:15rpx;
		}
	}
	.shop-search{
		border-radius: 20rpx;
		background-color: #F6F6F6;
		padding: 30rpx 50rpx;
		.search-input{
			font-size:28rpx;
			line-height: 28rpx;
			color: $uni-color-light-gray;
			
		}
	}
	.date-container{
		.date_title{
			border-bottom: 1px solid #E9E9E9;
		}
		
		.date_list{
			text-align: center;
			padding: 10rpx 0;
			font-weight: bold;
			color:$uni-color-gray;
			font-size: 28rpx;
		}
		.date-week{
			line-height: 70rpx;
			height: 70rpx;
			font-weight: bold;
		}
		
		.more-date{
			width: 30rpx;
		}
		
		$height:66rpx;
		.date-num-text{
			padding: 2px;
			width: $height;
			height: $height;
			line-height: $height;
			text-align: center;
			border-radius: 50%;
			display: block;
			margin:auto;
		}
		.date-num-text_check{
			color: #fff;
			background-color: $uni-color-bg-orange;
		}
		.date-num-text_invalid{
			color: #999999;
		}
		.date_btn{
			width: 90rpx;
			background:#FF7A20;
		}
		.calendar_icon{
			width: 40rpx;
			line-height: 40rpx;
			display: block;
			margin:auto;
			padding-top: 10rpx;
		}
	}
	
	.shop-container{
		.city-name{
			margin-left: 10rpx;
			margin-right:10rpx;
		}
		.icon-location{
			width: 30rpx;
		}
		.icon-more, .icon-detail {
			width: 15rpx;
			height: auto;
		}
		
		.link-detail{
			color: $uni-color-orange;
			font-size: 28rpx;
			margin-right: 8rpx;
		}
		
		.line{border-top: 1px solid #F2F2F2;}
		
	}
</style>
